﻿@model FlyingCircusWebIS.ViewModels.HomeVM.HomeIndexVM

@{
    ViewBag.Title = "Página inicial";
}
@section css{
    @Styles.Render("~/Content/css/flexslider")
}
<!-- div slider começa aqui -->
<div class="slider">
    <div class="flexslider">
        <ul class="slides">
            <li>
                <img src="imagens/rj.jpg" />
                <div class="detail-one">
                    <a href="@Url.Action("Procurar", "Reserva", new { CidadeDestino = "Rio de Janeiro" })">
                        <h3>#RioDeJaneiro</h3>
                    </a>
                </div>
            </li>
            <li>
                <img src="imagens/spslider.jpg" />
                <div class="detail-one">
                    <a href="@Url.Action("Procurar", "Reserva", new { CidadeDestino = "São Paulo" })">
                        <h3>#SãoPaulo</h3>
                    </a>
                </div>
            </li>
            <li>
                <img src="imagens/campograndeslider.jpg" />
                <div class="detail-one">
                    <a href="@Url.Action("Procurar", "Reserva", new { CidadeDestino = "Campo Grande" })">
                        <h3>#CampoGrande</h3>
                    </a>
                </div>
            </li>
            <li>
                <img src="imagens/maceioslider.jpg" />
                <div class="detail-one">
                    <a href="@Url.Action("Procurar", "Reserva", new { CidadeDestino = "Maceió" })">
                        <h3>#Maceió </h3>
                    </a>
                </div>
            </li>
        </ul>

        <div id="main-pesquisavoo">

            @using (Html.BeginForm("Procurar", "Reserva", FormMethod.Get, new { id = "pesquisavoo" }))
            {                
                <dl>
                    <dd>
                        @Html.Label("CidadeOrigem", "De")
                        @Html.TextBox("CidadeOrigem", "", new { @class = "origemdestino", placeholder = "Digite a origem" })
                    </dd>
                    <dd class="margin-top">
                        @Html.Label("CidadeDestino", "Para")
                        @Html.TextBox("CidadeDestino", "", new { @class = "origemdestino", placeholder = "Digite o destino" })
                    </dd>

                    <dd class="float-left1">
                        @Html.Label("DataInicial", "Data inicial")
                        @Html.TextBox("DataInicial", "", new { @class = "datetimepicker-pt-br" })
                    </dd>
                    <dd class="float-left2">
                        @Html.Label("DataFinal", "Data final")
                        @Html.TextBox("DataFinal", "", new { @class = "datetimepicker-pt-br" })
                    </dd>
                </dl>
                
                <br />
                <input class="enviar" type="submit" value="Procurar" />
            }

            <!-- div main-pesquisavoo termina aqui -->
        </div>
        <!-- div flexslider termina aqui -->
    </div>
    <!-- div slider termina aqui -->
</div>

<!-- div promoção aqui -->
<div id="promocao">
    <h1>Ofertas Flying Circus <span class="green">Airlines</span></h1>

    @{
        foreach (var voo in Model.VoosPromocionais)
        {
            int idVoo = voo.IdVoo;
            string nomeCidadePartida = voo.AeroportoPartida.Cidade.NomeCidade;
            string nomeCidadeDestino = voo.AeroportoChegada.Cidade.NomeCidade;
            string precoSemDesconto = voo.PrecoBaseReservaSemDescontoFormatado;
            string precoComDesconto = voo.PrecoBaseReservaFormatado;
            
        <div class="promo">
            <a href='@Url.Action("Procurar", "Reserva", new { CidadeOrigem = @nomeCidadePartida, CidadeDestino = @nomeCidadeDestino })'>
                <p>
                    <img src='@Url.Content("~/Imagens/Cidades/" + nomeCidadeDestino + ".jpg")' alt="@nomeCidadeDestino" class="float-left" />
                </p>
            </a>
            <br>
            <div class="promoinfo">
                <h4><span class="green">De: </span>@nomeCidadePartida<br>
                    <span class="green">Para: </span>@nomeCidadeDestino</h4>
                <span class="preco">de: @precoSemDesconto</span><br />
                <span class="desconto">por: @precoComDesconto</span>
            </div>
        </div>
        }  
    }

    <br>
    <!-- div promocao termina aqui -->
</div>


@section scripts{

    @Scripts.Render("~/bundles/flexslider")

    <script type="text/javascript">
        $(document).ready(function () {
            // ActionChange 
            $(".inicial").toggleClass("current");


            // Configuração do plugin dateTimePicker
            jQuery(".datetimepicker-pt-br").datetimepicker({
                lang: 'pt',
                format: 'd/m/Y',
                minDate: 0,
                timepicker: false
            });



            function buscarCidades() {

                var accentMap = {
                    "á": "a",
                    "ã": "a",
                    "â": "a",
                    "ê": "e",
                    "é": "e",
                    "í": "i",
                    "ó": "o",
                    "õ": "o",
                    "ú": "u",
                };
                var normalize = function (term) {
                    var ret = "";
                    for (var i = 0; i < term.length; i++) {
                        ret += accentMap[term.charAt(i)] || term.charAt(i);
                    }
                    return ret;
                };

                $.getJSON('@Url.Action("BuscarCidades")', null, function (data) {
                    $("#pesquisavoo .origemdestino").autocomplete({
                        minLength: 3,
                        source: function (request, response) {
                            var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
                            response($.grep(data, function (value) {
                                value = value.label || value.value || value;
                                return matcher.test(value) || matcher.test(normalize(value));
                            })
                            );
                        }
                    });
                });
            }
            //AUTOCOMPLETE
            buscarCidades();
        });

    </script>


    <!-- Inicializar Flexslider -->
    <script type="text/javascript">

        $(window).load(function () {
            $('.flexslider').flexslider({
                slideshowSpeed: 7500,
                animationSpeed: 1000,
                animation: "slide",
                start: function (slider) {
                    slider.manualPause = false;
                    slider.mouseover(function () {
                        slider.manualPause = true;
                        slider.pause();
                    });
                    slider.mouseout(function () {
                        slider.manualPause = false;
                        slider.play();
                    });
                    $('body').removeClass('loading');
                }
            });
        });
    </script>
}

